<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<h:html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:ui="http://java.sun.com/jsf/facelets"> 

<h:head></h:head> 
<h:body>

<script>
function isNotEmpty(field) {
	alert(document.getElementById('mainForm:nameInput').value);
    return document.getElementById('mainForm:nameInput').value!="";	
}
</script>

<h:form id="mainForm">

    <h:messages layout="table"/>
    
    <h:panelGrid columns="3">
    
        <h:outputText value="Nome:"/>
        <h:inputText value="#{greetingBean.name}" id="nameInput" required="true"/>
        <h:message for="nameInput"/>
        
        <h:outputText value="Età:"/>
        <h:inputText value="#{greetingBean.age}" id="nameAge"/>
        <h:message for="nameAge"/>
        
        <h:outputText value="Titolo:"/>
        <h:inputText value="#{greetingBean.title}" id="nameTitle" required="true">
        <!-- l'idea era di fare cambiare il salutation alla chiamata ajax, ma serve chiamare doGreeting perché non ci sono altri setSalutation() -->
        <!-- quindi mettiamo un ulteriore outputText (messageSir) e mostriamo quello -->
            <f:ajax event="keyup" execute="nameInput nameTitle" render="messageTitle messageSir"/>
        </h:inputText>
        
        <h:message id="messageTitle" for="nameTitle"/>
        
        <h:outputText value="Persona:" />
        <h:selectOneMenu id="person" value="#{greetingBean.person}">
            <f:selectItem itemLabel="-nobody-" itemValue="" noSelectionOption="true"/>
            <f:selectItems value="#{greetingBean.personList}" var="p" itemLabel="#{p.lastName}, #{p.firstName}" itemValue="#{p.personId}"/>
        </h:selectOneMenu>
        <h:message id="messagePerson" for="person"/>
        
        <h:outputText id="messageSalutation" value="#{greetingBean.salutation}" rendered="#{not empty greetingBean.salutation}"/>
        <h:outputText id="messageSir" value="(Dear Sir. ${greetingBean.name})"/>
        <!--  volevo mettere questo, ma serve un criterio per controllare l'inputField e non il bean  ma non ha funzionato nemmeno rendered="#{not empty nameInput}"/>-->
        <!-- rendered="#{not empty greetingBean.name}"/> -->
        <!-- ho tentato con una funzione javascript, ma anche se ci fossi riuscito non avrebbe avuto senso rendered="isNotEmpty(nameInput)"/>  
          perché a quel punto tanto vale mettere sull'onclick() dell'oggetto che cambia il toggle della visibilità dell'outputText 
          http://stackoverflow.com/questions/13817275/jsf-rendered-condition -->
    
    </h:panelGrid>

    <h:commandButton action="#{greetingBean.doGreeting}" value="Greet Me"/>
</h:form>

</h:body> 
</h:html>
